<template>
  <el-container>
    <!-- Tabs for navigation -->
    <!-- <el-tabs v-model="activeComponent" @tab-click="handleTabClick">
      <el-tab-pane label="Component One" name="componentOne"></el-tab-pane>
      <el-tab-pane label="Component Two" name="componentTwo"></el-tab-pane>
    </el-tabs> -->

    <!-- Dropdown for more options -->
    <el-dropdown trigger="click" v-model="dropdownOpen">
      <span class="el-dropdown-link">
        More Options<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="setActiveComponent('componentOne')">Component One</el-dropdown-item>
        <el-dropdown-item @click.native="setActiveComponent('componentTwo')">Component Two</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    
  </el-container>
    <!-- Conditional rendering of components -->
    <ComponentOne v-if="activeComponent === 'componentOne'" />
    <ComponentTwo v-if="activeComponent === 'componentTwo'" />
  <el-container>

  </el-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useActiveComponentStore } from './stores/activeComponentStore';
import ComponentOne from './components/ComponentOne.vue';
import ComponentTwo from './components/ComponentTwo.vue';

export default defineComponent({
  components: {
    ComponentOne,
    ComponentTwo,
  },
  setup() {
    const store = useActiveComponentStore();

    const handleTabClick = (tab: any) => {
      store.setActiveComponent(tab.props.name);
    };

    return {
      ...store,
      handleTabClick,
    };
  },
});
</script>
<style scoped>

@import 'bootstrap/dist/css/bootstrap.min.css';
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

</style>
